<template>
  <Page class="bg-[#f8f9fa] text-[#333] min-h-screen">
    <!-- 头部区域 -->
    <view class="header bg-gradient-to-r from-[#1890ff] to-[#096dd9] text-white p-[12rpx_15rpx] shadow-[0_2rpx_10rpx_rgba(0,0,0,0.1)] sticky top-0 z-[1000]">
      <view class="top-bar flex justify-between items-center">
        <view class="location flex items-center text-[14rpx]">
          <IconFont name="icon-location" class="mr-[5rpx]" />
          <text id="current-city">南宁市</text>
        </view>
        <view class="user-info flex items-center">
          <view class="avatar w-[30rpx] h-[30rpx] rounded-full bg-white text-[#1890ff] flex items-center justify-center mr-[8rpx] font-bold text-[14rpx]">
            张
          </view>
          <text class="user-name">张三</text>
        </view>
      </view>
      <view class="id-display text-[12rpx] opacity-[0.9]">
        <span>平台ID: </span>
        <span id="user-id">NF123456</span>
      </view>
    </view>
    
    <!-- 搜索区域 -->
    <view class="search-container p-[10rpx_15rpx] bg-white">
      <view class="search-box flex bg-[#f5f5f5] rounded-[20rpx] p-[8rpx_15rpx] items-center">
        <IconFont name="icon-search" />
        <nut-input 
          class="flex-1 bg-transparent border-none outline-none text-[14rpx] ml-[10rpx]"
          placeholder="搜索悬赏任务、关键词..."
          v-model="searchText"
          @confirm="handleSearch"
        />
      </view>
    </view>
    
    <!-- 筛选区域 -->
    <view class="filters flex overflow-x-auto p-[10rpx_15rpx] bg-white border-t border-b border-[#eee]">
      <view 
        v-for="(filter, index) in filters" 
        :key="index"
        class="filter-item px-[12rpx] py-[5rpx] bg-[#f5f5f5] rounded-[15rpx] mr-[10rpx] text-[13rpx] whitespace-nowrap cursor-pointer"
        :class="{ 'active bg-[#1890ff] text-white': activeFilter === index }"
        @click="activeFilter = index"
      >
        {{ filter }}
      </view>
    </view>
    
    <!-- 悬赏任务列表 -->
    <view class="bounty-list p-[10rpx_15rpx] min-h-[calc(100vh-180rpx)]">
      <view 
        v-for="(bounty, index) in bounties" 
        :key="index"
        class="bounty-card bg-white rounded-[10rpx] p-[15rpx] mb-[15rpx] shadow-[0_2rpx_8rpx_rgba(0,0,0,0.05)] relative"
      >
        <div class="bounty-header flex justify-between mb-[10rpx] items-center">
          <div class="bounty-title text-[16rpx] font-semibold flex-1">
            {{ bounty.title }}
          </div>
          <div class="bounty-status text-[12rpx] px-[8rpx] py-[3rpx] rounded-[10rpx] bg-[#f5f5f5]" :class="bounty.statusClass">
            {{ bounty.status }}
          </div>
        </div>
        
        <div class="bounty-publisher flex items-center mb-[10rpx]">
          <div class="publisher-avatar w-[25rpx] h-[25rpx] rounded-full bg-[#eee] mr-[8rpx] text-[12rpx] flex items-center justify-center">
            {{ bounty.publisherAvatar }}
          </div>
          <div class="publisher-name text-[13rpx] text-[#666]">
            {{ bounty.publisherName }}
          </div>
        </div>
        
        <div class="bounty-desc text-[13rpx] text-[#666] mb-[10rpx] leading-[1.5]">
          {{ bounty.desc }}
        </div>
        
        <!-- 分阶段任务信息 -->
        <view 
          class="phase-info my-[10rpx] p-[10rpx] bg-[#f9f9f9] rounded-[5rpx] border-l-[3rpx] border-l-[#1890ff]"
          v-if="bounty.hasPhase"
        >
          <div class="phase-header flex justify-between text-[13rpx] mb-[5rpx]">
            <div class="phase-title font-medium">第一阶段：风格提案</div>
            <div class="phase-status text-[#52c41a]">已付款</div>
          </div>
          <div>金额：¥500 | 截止：明天 18:00</div>
        </view>
        
        <div class="bounty-meta flex justify-between text-[12rpx] text-[#999] mb-[15rpx]">
          <div>
            <div>发布时间：{{ bounty.publishTime }}</div>
            <div>交付截止：{{ bounty.deadline }}</div>
          </div>
          <div class="bounty-amount text-[18rpx] font-bold text-[#fa541c] text-right my-[5rpx]">
            {{ bounty.amount }}
          </div>
        </div>
        
        <view class="flex flex-wrap mb-[10rpx]">
          <view 
            v-for="(tag, tIndex) in bounty.tags" 
            :key="tIndex"
            class="tag text-[12rpx] px-[8rpx] py-[3rpx] bg-[#f0f2f5] rounded-[3rpx] mr-[5rpx] mb-[5rpx]"
          >
            {{ tag }}
          </view>
        </view>
        
        <view class="bounty-footer flex justify-between mt-[10rpx]">
          <view>已申请：{{ bounty.applyCount }}人</view>
          <nut-button 
            class="btn-apply px-[15rpx] py-[8rpx] bg-[#1890ff] text-white border-none rounded-[5rpx] text-[14rpx] cursor-pointer"
            :disabled="bounty.disabled"
            @click="handleApply(bounty.title)"
          >
            申请执行
          </nut-button>
        </view>
      </view>
    </view>
    
    <!-- 浮动发布按钮 -->
    <view class="float-btn fixed bottom-[80rpx] right-[20rpx] w-[60rpx] h-[60rpx] rounded-full bg-gradient-to-br from-[#ff8a00] to-[#e52e71] text-white flex items-center justify-center text-[24rpx] shadow-[0_4rpx_12rpx_rgba(0,0,0,0.15)] cursor-pointer z-[999] animate-pulse">
      <IconFont name="icon-plus" />
    </view>
    
    <!-- 普通用户 TabBar -->
    <view class="tabbar user-tab fixed bottom-0 left-0 w-full h-[60rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]">
      <view 
        v-for="(tab, index) in userTabs" 
        :key="index"
        class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
        :class="{ 'active bg-[#f0f8ff]': index === 1 }"
        @click="handleTabClick(tab.label)"
      >
        <view class="tab-icon text-[20rpx] mb-[4rpx]" :class="{ 'text-[#1890ff]': index === 1 }">
          <IconFont :name="tab.icon" />
        </view>
        <view class="tab-label text-[11rpx]">
          {{ tab.label }}
        </view>
      </view>
    </view>
    
    <!-- 从业者 TabBar -->
    <view class="tabbar worker-tab hidden fixed bottom-0 left-0 w-full h-[60rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]">
      <view 
        v-for="(tab, index) in workerTabs" 
        :key="index"
        class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
        :class="{ 'active bg-[#f6ffed]': index === 0 }"
        @click="handleTabClick(tab.label)"
      >
        <view class="tab-icon text-[20rpx] mb-[4rpx]" :class="{ 'text-[#52c41a]': index === 0 }">
          <IconFont :name="tab.icon" />
        </view>
        <view class="tab-label text-[11rpx]">
          {{ tab.label }}
        </view>
      </view>
    </view>
    
    <!-- 商家 TabBar -->
    <view class="tabbar merchant-tab hidden fixed bottom-0 left-0 w-full h-[60rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]">
      <view 
        v-for="(tab, index) in merchantTabs" 
        :key="index"
        class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
        :class="{ 'active bg-[#fff7e6]': index === 1 }"
        @click="handleTabClick(tab.label)"
      >
        <view class="tab-icon text-[20rpx] mb-[4rpx]" :class="{ 'text-[#fa8c16]': index === 1 }">
          <IconFont :name="tab.icon" />
        </view>
        <view class="tab-label text-[11rpx]">
          {{ tab.label }}
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Input as nutInput, Button as nutButton } from '@nutui/nutui-taro'

// 搜索文本
const searchText = ref('')

// 筛选条件
const filters = ['全部', '设计类', '开发类', '文案类', '运营类', '咨询类', '数据类', '本地服务']
const activeFilter = ref(0)

// 悬赏任务数据
const bounties = [
  {
    title: '网站前端开发',
    status: '新发布',
    statusClass: 'bg-[#e6f7ff] text-[#1890ff]',
    publisherAvatar: '天',
    publisherName: '天行科技 · 企业认证',
    desc: '需要开发公司官网前端页面，需熟悉React框架，响应式设计，要求7天内完成交付。有现成设计稿...',
    publishTime: '2小时前',
    deadline: '3天后',
    amount: '￥1200',
    tags: ['前端开发', 'React', '响应式'],
    applyCount: 18,
    hasPhase: false,
    disabled: false
  },
  {
    title: '移动应用UI设计',
    status: '执行中',
    statusClass: 'bg-[#f6ffed] text-[#52c41a]',
    publisherAvatar: '智',
    publisherName: '智能生活 · 平台认证',
    desc: '智能家居控制APP界面设计，需要提供风格稿、主界面设计和完整设计规范。分三个阶段付款...',
    publishTime: '1天前',
    deadline: '6天后',
    amount: '￥3500',
    tags: ['UI设计', '移动端', '交互设计'],
    applyCount: 37,
    hasPhase: true,
    disabled: false
  },
  {
    title: '产品文案撰写（中英双语）',
    status: '新发布',
    statusClass: 'bg-[#e6f7ff] text-[#1890ff]',
    publisherAvatar: '海',
    publisherName: '海外优选 · 企业认证',
    desc: '为跨境电商产品撰写产品介绍文案（中英文各一版），需要突出产品特点和优势，吸引目标客户...',
    publishTime: '4小时前',
    deadline: '2天后',
    amount: '￥800',
    tags: ['文案撰写', '英文文案', '产品营销'],
    applyCount: 7,
    hasPhase: false,
    disabled: false
  },
  {
    title: '微信公众号运营（3个月）',
    status: '多人承接',
    statusClass: 'bg-[#fff7e6] text-[#fa8c16]',
    publisherAvatar: '教',
    publisherName: '教育优选 · 平台认证',
    desc: '长期合作！需要专业的教育领域运营人才，负责公众号内容规划、撰写、排版和数据分析...',
    publishTime: '2天前',
    deadline: '每月考核',
    amount: '￥5000/月',
    tags: ['公众号运营', '内容创作', '教育行业'],
    applyCount: 46,
    hasPhase: false,
    disabled: false
  }
]

// 底部导航数据
const userTabs = [
  { icon: 'icon-home', label: '接单广场' },
  { icon: 'icon-tasks', label: '悬赏大厅' },
  { icon: 'icon-education', label: '能力提升' },
  { icon: 'icon-factory', label: '工厂招聘' },
  { icon: 'icon-user', label: '个人中心' }
]

const workerTabs = [
  { icon: 'icon-taskhall', label: '任务大厅' },
  { icon: 'icon-wallet', label: '钱包' },
  { icon: 'icon-record', label: '接单记录' },
  { icon: 'icon-credit', label: '信用评级' },
  { icon: 'icon-user', label: '我的' }
]

const merchantTabs = [
  { icon: 'icon-data', label: '店铺数据' },
  { icon: 'icon-publish', label: '任务发布' },
  { icon: 'icon-customers', label: '客户管理' },
  { icon: 'icon-orders', label: '订单处理' },
  { icon: 'icon-user', label: '我的' }
]

// 当前角色
const currentRole = ref('user') // user, worker, merchant

// 处理搜索
const handleSearch = () => {
  Taro.showToast({
    title: `搜索: ${searchText.value}`,
    icon: 'none',
    duration: 2000
  })
}

// 处理申请执行
const handleApply = (taskTitle) => {
  Taro.showToast({
    title: `您已申请执行任务: ${taskTitle}\n等待发布者审核...`,
    icon: 'none',
    duration: 2000
  })
}

// 处理Tab点击
const handleTabClick = (label) => {
  Taro.showToast({
    title: `已切换到: ${label}`,
    icon: 'none',
    duration: 2000
  })
}

// 处理角色切换
const switchRole = (role) => {
  currentRole.value = role
  // 在实际应用中，这里应该显示对应角色的TabBar
  Taro.showToast({
    title: `已切换到${role === 'user' ? '普通用户' : role === 'worker' ? '从业者' : '商家'}模式`,
    icon: 'none',
    duration: 2000
  })
}
</script>